<template>
  <page-header-wrapper :title="false">
    <a-card title="问题录音">
      <a-tabs @change="onTabs">
        <a-tab-pane key="2" tab="APP拨号"></a-tab-pane>
        <a-tab-pane key="1" tab="软件拨号"></a-tab-pane>
      </a-tabs>
      <s-table
        bordered
        ref="table"
        :row-class-name="(record) => { if (record.is_read === 0) return 'table-color-dust' }"
        :row-key="(record) => record.id"
        :columns="questionColumns"
        :data="questionData"
      >
        <template slot="url" slot-scope="text,record">
          <audio v-if="record.duration != 0" :src="text" controls :style="{ height: '20px', lineHeight: '20px' }">
            您的浏览器不支持 audio 标签
          </audio>
          <div v-else>-</div>
        </template>
        <template slot="action" slot-scope="text,record">
          <a-badge :dot="record.is_read == 0">
            <a-button v-if="record.is_read == 0" size="small" type="primary" @click="getRes(record.sid)">查收</a-button>
            <a-button v-if="record.is_read == 1" size="small" disabled type="primary">已查收</a-button>
          </a-badge>
        </template>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import col from '@/columns/calls'
import { getIsRead, getQuestionList } from '@/api/voice'

export default {
  components: {
    STable
  },
  name: 'QuestionCall',
  data () {
    return {
      questionColumns: col.question,
      questionData: parameters => {
        return getQuestionList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      visible: false,
      queryParam: {},
      content: {},
      currentId: ''
    }
  },
  created () {
    this.queryParam['filter[type]'] = '2'
  },
  methods: {
    getRes (id) {
      getIsRead(id).then(res => {
        if (res.status === 0) {
          this.$refs.table.refresh(true)
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    },
    onTabs (key) {
      this.queryParam['filter[type]'] = key
      this.$refs.table.refresh(true)
    }
  }
}
</script>

<style>
.ant-table-tbody > tr.table-color-dust {
  background-color: #ffcccc;
}
</style>
